<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        属性
      </div>
      <div class="ef-node-form-body">
        <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'">
          <!--                  <div>{{node.state}}演示:  node: {{node}}&#45;&#45;{{node.type}}</div>-->
          <el-form-item label="节点类型">
            <el-input v-model="node.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="节点名称">
            <el-input v-model="node.name"></el-input>
          </el-form-item>
          <!--                    <el-form-item label="left坐标">-->
          <!--                        <el-input v-model="node.left" :disabled="true"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="top坐标">-->
          <!--                        <el-input v-model="node.top" :disabled="true"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="ico图标">-->
          <!--                        <el-input v-model="node.ico"></el-input>-->
          <!--                    </el-form-item>-->
          <!--                    <el-form-item label="状态">-->
          <!--                        <el-select v-model="node.state" placeholder="请选择">-->
          <!--                            <el-option-->
          <!--                                    v-for="item in stateList"-->
          <!--                                    :key="item.state"-->
          <!--                                    :label="item.label"-->
          <!--                                    :value="item.state">-->
          <!--                            </el-option>-->
          <!--                        </el-select>-->
          <!--                    </el-form-item>-->
          <!-------------001渠道-------------------->
          <el-form-item label="渠道名称" v-show="node.type==='channel'">
            <el-select v-model="node.channel" placeholder="请选择">
              <el-option
                v-for="item in channelList"
                :key="item.channel"
                :label="item.label"
                :value="item.channel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div v-show="node.type==='channel'">
            <span>客户是否随机分配{{ node.clientDistribution }}</span>
            <span>
                      <el-checkbox v-model="node.clientDistribution"></el-checkbox>
                    </span>
          </div>
          <div v-show="node.type==='channel' && !node.clientDistribution">
            <a
            >选择分组策略</a>
            <span>or</span>
            <a
            >自定义分组策略</a>
          </div>
          <div v-if="node.type==='channel' && !node.clientDistribution">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="node.strategyOrCustom"
            >
            </el-input>
          </div>

          <el-form-item label="客户占比" v-if="node.type==='channel' && node.clientDistribution">
            <el-input
              maxlength="2"
              onkeyup="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"
              placeholder="请输入数字（1~99）"
              v-model="node.clientAccounted"
            ></el-input>
            <span>%</span>
          </el-form-item>
          <!-------------002客群-------------------->
          <el-form-item label="分群客群标识" v-show="node.type==='customerFission'">
            <el-input v-model="node.groupingCustomer"></el-input>
          </el-form-item>
          <div v-show="node.type==='customerFission'">
            <span>客户是否随机分配{{ node.customerDistribution }}</span>
            <span>
                      <el-checkbox v-model="node.customerDistribution"></el-checkbox>
                    </span>
          </div>
          <div v-show="node.type==='customerFission' && !node.customerDistribution">
            <a
            >选择分组策略</a>
            <span>or</span>
            <a
            >自定义分组策略</a>
          </div>
          <div v-if="node.type==='customerFission' && !node.customerDistribution">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="node.customerOrCustom"
            >
            </el-input>
          </div>

          <el-form-item label="客户占比" v-if="node.type==='customerFission' && node.customerDistribution">
            <el-input
              maxlength="2"
              onkeyup="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"
              placeholder="请输入数字（1~99）"
              v-model="node.customerAccounted"
            ></el-input>
            <span>%</span>
          </el-form-item>
          <!-------------003智能推荐--001-------------------->
          <div v-show="node.type==='intelligentRecommend'">
            <a
            >营销产品概览</a>
            <span>or</span>
            <a
            >手工推荐产品</a>
          </div>
          <el-form-item label="营销产品" v-show="node.type==='intelligentRecommend'">
            <el-input v-model="node.marketingProduct"></el-input>
          </el-form-item>
          <el-form-item label="测试产品" v-show="node.type==='intelligentRecommend'">
            <el-input v-model="node.testProduct"></el-input>
          </el-form-item>
          <div v-show="node.type==='intelligentRecommend'">
            <span>客户是否随机分配{{ node.productDistribution }}</span>
            <span>
                      <el-checkbox v-model="node.productDistribution"></el-checkbox>
                    </span>
          </div>

          <el-form-item label="客户占比" v-if="node.type==='intelligentRecommend' && node.productDistribution">
            <el-input
              maxlength="2"
              onkeyup="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"
              placeholder="请输入数字（1~99）"
              v-model="node.productAccounted"
            ></el-input>
            <span>%</span>
          </el-form-item>
          <div v-show="node.type==='intelligentRecommend' && !node.productDistribution">
            <a
            >选择分组策略</a>
            <span>or</span>
            <a
            >自定义分组策略</a>
          </div>
          <div v-if="node.type==='intelligentRecommend' && !node.productDistribution">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="node.productOrIntelligent"
            >
            </el-input>
          </div>
          <!-------------003智能推荐--002-------------------->
          <div v-show="node.type==='handmadeRecommend'">
            <a
            >营销产品概览</a>
            <span>or</span>
            <a
            >手工推荐产品</a>
          </div>
          <el-form-item label="营销产品" v-show="node.type==='handmadeRecommend'">
            <el-input v-model="node.handmadeMarketingProduct"></el-input>
          </el-form-item>
          <el-form-item label="测试产品" v-show="node.type==='handmadeRecommend'">
            <el-input v-model="node.handmadeTestProduct"></el-input>
          </el-form-item>
          <div v-show="node.type==='handmadeRecommend'">
            <span>客户是否随机分配{{ node.handmadeProductDistribution }}</span>
            <span>
                      <el-checkbox v-model="node.handmadeProductDistribution"></el-checkbox>
                    </span>
          </div>

          <el-form-item label="客户占比" v-if="node.type==='handmadeRecommend' && node.handmadeProductDistribution">
            <el-input
              maxlength="2"
              onkeyup="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"
              placeholder="请输入数字（1~99）"
              v-model="node.handmadeProductAccounted"
            ></el-input>
            <span>%</span>
          </el-form-item>
          <div v-show="node.type==='handmadeRecommend' && !node.handmadeProductDistribution">
            <a
            >选择分组策略</a>
            <span>or</span>
            <a
            >自定义分组策略</a>
          </div>
          <div v-if="node.type==='handmadeRecommend' && !node.handmadeProductDistribution">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="node.productOrHandmade"
            >
            </el-input>
          </div>

          <!-------------004时间段-------------------->
          <el-form-item label="时间段" v-show="node.type==='timeQuantum'">
            <el-input v-model="node.startTime"></el-input>
          </el-form-item>
          <el-form-item label="至" v-show="node.type==='timeQuantum'">
            <el-input v-model="node.endTime"></el-input>
          </el-form-item>
          <div v-show="node.type==='timeQuantum'">
            <span>客户是否随机分配{{ node.customerDistribution }}</span>
            <span>
                      <el-checkbox v-model="node.timeDistribution"></el-checkbox>
                    </span>
          </div>
          <div v-show="node.type==='timeQuantum' && !node.timeDistribution">
            <a
            >选择分组策略</a>
            <span>or</span>
            <a
            >自定义分组策略</a>
          </div>
          <div v-if="node.type==='timeQuantum' && !node.timeDistribution">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              v-model="node.timeOrHandmade"
            >
            </el-input>
          </div>

          <el-form-item label="客户占比" v-if="node.type==='timeQuantum' && node.timeDistribution">
            <el-input
              maxlength="2"
              onkeyup="value=value.replace(/\D/g, '').replace(/^0{1,}/g, '')"
              placeholder="请输入数字（1~99）"
              v-model="node.timeAccounted"
            ></el-input>
            <span>%</span>
          </el-form-item>


          <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
          </el-form-item>
        </el-form>

        <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
          <el-form-item label="条件">
            <el-input v-model="line.label"></el-input>
          </el-form-item>
          <div>演示:line--{{ line }}</div>
          <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>
  </div>

</template>

<script>
import { cloneDeep } from 'lodash'

export default {
  data() {
    return {
      visible: true,
      // node 或 line
      type: 'node',
      node: {},
      line: {},
      data: {},
      channelList: [{
        channel: 'channel01',
        label: '渠道01'
      }, {
        channel: 'channel02',
        label: '渠道02'
      }, {
        channel: 'channel03',
        label: '渠道03'
      }, {
        channel: 'channel04',
        label: '渠道04'
      }]
    }
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = 'node'
      this.data = data
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node)
        }
      })
    },
    lineInit(line) {
      this.type = 'line'
      this.line = line
    },
    // 修改连线
    saveLine() {
      console.log('node_form 回显001')
      this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
    },
    save() {
      this.data.nodeList.filter((node) => {
        console.log('node_form 回显002', node)
        if (node.id === this.node.id) {
          node.name = this.node.name //节点名称
          node.left = this.node.left //坐标
          node.top = this.node.top //坐标
          node.ico = this.node.ico //状态图标
          if (node.type === 'channel') {
            node.channel = this.node.channel //渠道名称
            node.clientAccounted = this.node.clientAccounted //渠道 客户占比
            node.clientDistribution = this.node.clientDistribution   //渠道 客户是否随机分配
            node.strategyOrCustom = this.node.strategyOrCustom //渠道 选择分组策略 or 自定义
          } else if (node.type === 'customerFission') {
            node.groupingCustomer = this.node.groupingCustomer //客群 分组客群标识
            node.customerDistribution = this.node.customerDistribution  //客群 客户是否随机分配
            node.customerAccounted = this.node.customerAccounted //客群 客户占比
            node.customerOrCustom = this.node.customerOrCustom //客群 分组客群标识
          } else if (node.type === 'intelligentRecommend') {
            node.marketingProduct = this.node.marketingProduct //智能推荐 营销产品 ***弹窗回显
            node.testProduct = this.node.testProduct  //智能推荐 测试产品 ***弹窗回显
            node.productDistribution = this.node.productDistribution //智能推荐 客户是否随机分配
            node.productAccounted = this.node.productAccounted //智能推荐 客户占比
            node.productOrIntelligent = this.node.productOrIntelligent //智能推荐 客户占比
          } else if (node.type === 'handmadeRecommend') {
            node.handmadeMarketingProduct = this.node.handmadeMarketingProduct //手工推荐 营销产品 ***弹窗回显
            node.handmadeTestProduct = this.node.handmadeTestProduct  //手工推荐 测试产品 ***弹窗回显
            node.handmadeProductDistribution = this.node.handmadeProductDistribution //手工推荐 客户是否随机分配
            node.handmadeProductAccounted = this.node.handmadeProductAccounted //手工推荐 客户占比
            node.productOrHandmade = this.node.productOrHandmade //手工推荐 客户占比
          } else if (node.type === 'timeQuantum') {
            node.startTime = this.node.startTime // 时间段- 开始时间段
            node.endTime = this.node.endTime  //时间段-  结束时间段
            node.timeDistribution = this.node.timeDistribution //时间段- 客户是否随机分配
            node.timeAccounted = this.node.timeAccounted //时间段- 客户占比
            node.timeOrHandmade = this.node.timeOrHandmade //时间段- ***弹窗回显
          }
          this.$emit('repaintEverything')
        }
      })
    }
  }
}
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
</style>
